<template>
  <div>
    <el-drawer
      direction="ltr"
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      style="width: 955px;"
    >
      <el-collapse style="width: 255px;">
        <el-collapse-item title="一致性 Consistency" name="1">
          <div>
            与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
          </div>
          <div>
            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
          </div>
        </el-collapse-item>
        <el-collapse-item title="反馈 Feedback" name="2">
          <div>
            控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
          </div>
          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
        </el-collapse-item>
        <el-collapse-item title="效率 Efficiency" name="3">
          <div>简化流程：设计简洁直观的操作流程；</div>
          <div>
            清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
          </div>
          <div>
            帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
          </div>
        </el-collapse-item>
        <el-collapse-item title="可控 Controllability" name="4">
          <div>
            用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
          </div>
          <div>
            结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
    <header class="header">
      <div class="barleft">
        <el-button
          @click="drawer = true"
          type="primary"
          icon="el-icon-s-unfold"
        ></el-button>
      </div>
      <div class="barright">
        <div class="barinput">
          <input type="text" />
        </div>
        <ul class="barsel">
          <li>
            <el-dropdown>
              <span>{{ language }}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <span @click="language = '中文'">中文</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <span @click="language = '英文'">英文</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li>
            <el-dropdown>
              <span class="iconfont icon-pengyou"></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <span @click="color = { background: '#000', color: '#fff' }">
                    black
                  </span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <span @click="color = { background: '#fff', color: '#000' }">
                    white
                  </span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li><span class="iconfont icon-pencil"></span></li>
          <li><span class="iconfont icon-shipin"></span></li>
        </ul>
      </div>
    </header>
    <main class="main">
      <div class="banner">
        <div class="logo">
          <img src="https://muse-ui.org/img/icon_logo.a76a122f.png" alt="" />
        </div>
        <h1>Muse-UI</h1>
        <p>{{ h1 }}</p>
        <div>
          <a
            :style="{ background: color.background, color: color.color }"
            href="#"
          >
            {{ a }}
          </a>
          <a
            :style="{ background: color.background, color: color.color }"
            href="#"
          >
            GitHub
          </a>
        </div>
      </div>
      <ul
        class="intro"
        :style="{ background: color.background, color: color.color }"
      >
        <li v-for="(item, index) in list" :key="index">
          <img :src="item.src" alt="" />
          <h2>{{ item.h }}</h2>
          <p>{{ item.p }}</p>
        </li>
      </ul>
    </main>
    <footer class="footer">
      Muse-UI is open source and released under the MIT Licence. Copyright (c)
      <br />
      2016 myron
    </footer>
  </div>
</template>

<script>
export default {
  watch: {
    language: {
      handler(newval) {
        if (newval === '英文') {
          this.list = [
            {
              src: 'https://muse-ui.org/img/img1.35d144b4.png',
              h: 'Rich Components',
              p:
                'Muse UI has more than 40 UI components, to adapt to different business environment.',
            },
            {
              src: 'https://muse-ui.org/img/img2.9bd96df4.png',
              h: 'Customizable',
              p:
                'Muse UI custom themes way is very elegant, only a small amount of code to complete the custom theme style',
            },
            {
              src: 'https://muse-ui.org/img/img3.6e264e66.png',
              h: 'Based On Vuejs',
              p:
                'Muse UI based on Vuejs, Vuejs is one of the fastest the front framework, friendly API can be used to develop complex single page of the application',
            },
          ]
          this.h1 =
            'Based on the Vue 2.0 elegant Material Design UI component library'
          this.a = 'Get Started'
        } else {
          this.list = [
            {
              src: 'https://muse-ui.org/img/img1.35d144b4.png',
              h: '组件丰富',
              p: 'Muse UI 拥有40多个UI 组件，用于适应不同业务环境。',
            },
            {
              src: 'https://muse-ui.org/img/img2.9bd96df4.png',
              h: '可定制',
              p:
                'Muse UI 自定义主题方式极为优雅，仅需少量代码即可完成主题样式替换。',
            },
            {
              src: 'https://muse-ui.org/img/img3.6e264e66.png',
              h: '基于 Vue 2.0',
              p:
                'Muse UI 基于 Vue2.0 开发，Vue2.0是当下最快的前端框架之一，小巧，api友好，可用于开发的复杂单页应用',
            },
          ]
          this.h1 = '基于 Vue 2.0 优雅的 Material Design UI 组件库'
          this.a = '快速上手'
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      drawer: false,
      language: '中文',
      color: { background: '#fff', color: '#000' },
    }
  },
}
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.header {
  background-image: linear-gradient(270deg, #8146b4, #6990f6);
  height: 64px;
  width: 100vw;
  padding: 0 4px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  .barleft {
    width: 48px;
    height: 48px;
    span {
      margin-left: 30px;
    }
  }
  .barright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      color: #fff;
      font-weight: 300;
      width: 180px;
      height: 30px;
      border: none;
      outline: none;
      background: rgba(255, 255, 255, 0.3);
      margin-right: 10px;
      padding-left: 20px;
    }
    .barsel {
      margin-right: 50px;
      li {
        display: inline-block;
        margin: 0 20px;
        span {
          color: #fff;
        }
      }
    }
  }
}
.main {
  margin-top: 64px;
  .banner {
    height: 500px;
    background-image: linear-gradient(270deg, #8146b4, #6990f6);
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    a {
      width: 92px;
      height: 36px;
      background: #fff;
      border-radius: 3px;
      line-height: 36px;
      display: inline-block;
      color: #000;
      margin-left: 15px;
      margin-top: 20px;
    }
    .logo {
      width: 120px;
      height: 120px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      img {
        height: 80px;
      }
    }
  }
  .intro {
    height: 400px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    background: #fff;
    li {
      max-width: 500px;
    }
    img {
      width: 300px;
    }
  }
}
.footer {
  height: 42px;
  padding: 50px 40px;
  text-align: center;
  background-color: #1b1b1b;
  color: #777;
  font-size: 14px;
}
</style>
